<template>
  <div class="app-container">

    <!-- 指标卡片 -->
    <el-row :gutter="20" style="margin-bottom:20px;">
      <el-col :span="6" v-for="(item,i) in kpis" :key="i">
        <el-card shadow="hover">
          <div class="flex items-center">
            <el-icon style="font-size:32px;margin-right:10px;"><component :is="item.icon" /></el-icon>
            <div>
              <div>{{item.label}}</div>
              <div style="font-size:28px;font-weight:bold;">{{item.value}}</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 饼 + 柱 -->
    <el-row :gutter="20" style="margin-bottom:20px;">
      <el-col :span="12">
        <el-card shadow="hover">
          <div ref="pieRef" style="width:100%;height:350px;"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="hover">
          <div ref="barRef" style="width:100%;height:350px;"></div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 折线图 -->
    <el-card shadow="hover">
      <div ref="lineRef" style="width:100%;height:350px;"></div>
    </el-card>

  </div>
</template>

<script setup lang="ts">
import {ref, onMounted} from "vue"
import * as echarts from "echarts"
import {ChatDotSquare,Message,Money,ShoppingCart} from '@element-plus/icons-vue'

/** KPI 假数据 */
const kpis = [
  { icon: ChatDotSquare, label:"新增用户", value:"102,400" },
  { icon: Message, label:"未读消息", value:"81,212" },
  { icon: Money, label:"成交金额", value:"9,280" },
  { icon: ShoppingCart, label:"购物总量", value:"13,600" }
]

const pieRef = ref()
const barRef = ref()
const lineRef = ref()

onMounted(()=>{
  /** pie */
  const pie = echarts.init(pieRef.value)
  pie.setOption({
    title:{text:'用户访问来源',left:'center'},
    tooltip:{trigger:'item'},
    legend:{left:'left'},
    series:[{
      type:'pie',
      radius:'60%',
      data:[
        {value:1048, name:'搜索引擎'},
        {value:735, name:'直接访问'},
        {value:580, name:'邮件营销'},
        {value:484, name:'联盟广告'},
        {value:300, name:'视频广告'}
      ]
    }]
  })

  /** bar */
  const bar = echarts.init(barRef.value)
  bar.setOption({
    title:{text:'每周用户活跃量',left:'center'},
    tooltip:{trigger:'axis'},
    xAxis:{type:"category", data:['周一','周二','周三','周四','周五','周六','周日']},
    yAxis:{type:"value"},
    series:[{type:"bar",data:[13253,34235,26321,12340,24643,1322,1324]}]
  })

  /** line */
  const line = echarts.init(lineRef.value)
  line.setOption({
    title:{text:'每月销售额',left:'center'},
    tooltip:{trigger:'axis'},
    legend:{data:['预计','实际'],top:30},
    xAxis:{type:'category', data:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']},
    yAxis:{type:'value'},
    series:[
      {name:'预计', type:'line', smooth:true, data:[120,130,150,160,180,200,220,240,230,210,180,170]},
      {name:'实际', type:'line', smooth:true, data:[110,100,130,150,140,220,260,280,250,200,190,170]}
    ]
  })

  window.addEventListener('resize',()=>{
    pie.resize()
    bar.resize()
    line.resize()
  })
})
</script>

<style lang="scss" scoped>
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: 'open sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
</style>
